<template>
    <view class="popup-container">
      <!-- 遮罩层 -->
      <view 
        class="overlay" 
        v-show="visible" 
        @click="closePopup"
      ></view>
      
      <!-- 弹出框 -->
      <view 
        class="popup" 
        :class="{'popup-show': visible, 'popup-hide': !visible}"
      >
        <view class="popup-content">
          <slot></slot>
        </view>
      </view>
    </view>
  </template>
  
  <script>
  export default {
    props: {
      visible: {
        type: Boolean,
        required: true
      }
    },
    methods: {
      // 关闭弹出框
      closePopup() {
        this.$emit('update:visible', false);  // 通知父组件关闭弹出框
      }
    }
  };
  </script>
  
  <style scoped>
  .popup-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }
  
  /* 遮罩层 */
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease;
  }
  
  /* 弹出框样式 */
  .popup {
    position: relative;
    width: 80%;
    max-width: 400px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  
  /* 弹出框显示动画 */
  .popup-show {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* 弹出框隐藏动画 */
  .popup-hide {
    opacity: 0;
    transform: translateY(30px);
  }
  
  /* 弹出框内容 */
  .popup-content {
    padding: 20px;
  }
  </style>
  